<script setup>
//引入依赖
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import {XYZ, TileDebug} from 'ol/source';
import View from 'ol/View';
import {fromLonLat} from 'ol/proj';
import { ref ,onMounted} from "vue";

const mapRef = ref(null)

const initMap = () => {
  const tiandiSource = new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"});
    mapRef.value = new Map({
    target:'map',
    layers: [
      new TileLayer({
        source: tiandiSource,
      }),
      //加载瓦片网格图层
      new TileLayer({
        source: new TileDebug({
          //获取瓦片图层数据对象（osmSource）的网格信息
          tileGrid: tiandiSource.getTileGrid()
        })
      })
    ],
      view: new View({
        //地图初始中心点
        center: fromLonLat([87.16552734375, 39.470125122358176]),
        //地图初始显示级别
        zoom: 8
      })
  })
}

onMounted(initMap)
</script>

<template>
  <!--地图挂载dom-->
  <div id="map">
  </div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>